<template>

    <div id='register' >
            <div id="hdnav">
                <router-link to="/" >登录</router-link> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
                 <router-link to="/register" >注册</router-link>
            </div>
 
        <el-row :gutter="20">
            <el-col :span="8" :offset="8">
                <el-form ref="form" :model="form" status-icon  :rules="rules" label-width="80px">
                    <el-form-item label="账户名称" prop='managerName'>
                        <el-input v-model="form.managerName"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop='managerPassword'>
                        <el-input show-password  v-model="form.managerPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop='managerPassword2'>
                        <el-input show-password  v-model="form.managerPassword2"></el-input>
                    </el-form-item>
                    <el-form-item>
                         <el-row :gutter="20">
                              <el-col :span="3" :offset="3">
                                     <el-button @click="resetForm('form')">重置</el-button>
                              </el-col>
                              <el-col :span="3" :offset="8" >
                                      <el-button type="primary" :disabled="btnEnable" class="submit" @click="onSubmit">注册</el-button>
                              </el-col>                       
                         </el-row>
                    </el-form-item>
                </el-form>    
            </el-col>
        </el-row>  
              
    </div>
</template>

<script>
export default {
    name:'register',
     data() {
        var checkName = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('账户名称不能为空'));
            this.check.managerName=false;
            } else {                
                this.check.managerName=true;
                callback();
                if(this.check.managerName&&this.check.managerPassword&&this.check.managerPassword2){
                      this.btnEnable=false;        
                }
            }
        };
        var checkPassword = (rule, value, callback) => {
            if (value === '') {
                this.check.managerPassword=false;
                callback(new Error('密码不能为空'));
            } else {

                if (this.form.managerPassword2 !== '') {
                    this.$refs.form.validateField('managerPassword2');
                }
                this.check.managerPassword=true;
                callback();
                if(this.check.managerName&&this.check.managerPassword&&this.check.managerPassword2){
                         this.btnEnable=false;                 
                }
            }
        };
        var checkPassword2 = (rule, value, callback) => {
            if (value === '') {
                this.check.managerPassword2=false;
                callback(new Error('确认密码不能为空'));
            }else if(this.form.managerPassword!==this.form.managerPassword2){
                 this.check.managerPassword2=false;
                callback(new Error('两次密码不一致'));
            } else {
                this.check.managerPassword2=true;
                callback();
                if(this.check.managerName&&this.check.managerPassword&& this.check.managerPassword2){
                         this.btnEnable=false;                 
                }
            }
        };
      return {
        form: {
          managerName:'',
          managerPassword:'',
          managerPassword2:''
        },
         rules: {
          managerName: [
            { validator: checkName, trigger: 'blur' }
          ],
          managerPassword: [
            { validator: checkPassword, trigger: 'blur' }
          ],          
          managerPassword2: [
            { validator: checkPassword2, trigger: 'blur' }
          ],          
        },
        btnEnable:true,
        check:{
            managerName:'',
            managerPassword:'',
            managerPassword2:''
        }
      }
    },
    methods: {
      onSubmit() {
        this.$axios.post('/register',this.form)
        .then(resp=>{
            if(resp.data.success){
                this.$router.push({
                    path:'/',
                    query:{registerMessage:'注册成功，请登录'}
                })
            }else{
                 this.$message({
                     message:resp.data.message,
                     type:'warning'
                 })
            }
        })
        .catch(error=>{
            this.$message.error('系统未知错误');
            console.log(error);
        })
      },
       resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>


<style>
#hdnav {
  padding: 30px;
}
</style>